<template>
  <div class="annual-plan-box">
    <div class="table-search">
      <div class="search-item">
        <span>合同名称</span>
        <div class="search-input">
          <a-input v-model:value="searchObj.contractName" :bordered="false" placeholder="请输入合同名称"></a-input>
        </div>
      </div>
      <div class="search-item">
        <span>合同类型</span>
       <div class="search-input">
         <a-select
             ref="select"
             v-model:value="searchObj.typeOfContract"
             style="width: 100%"
             :bordered="false"
             placeholder="请选择合同类型"
             :options="contractType"
         >
         </a-select>
        </div>
      </div>
      <div class="search-item">
        <span>归档时间</span>
        <div class="search-input">
          <a-date-picker v-model:value="searchObj.archiveTime" style="width: 100%" :bordered="false" />
        </div>
      </div>
      <div class="search-item">
        <span>申请人</span>
        <div class="search-input">
          <a-input v-model:value="searchObj.applicant" :bordered="false" placeholder="请输入申请人"></a-input>
        </div>
      </div>
      <div class="search-btn">
        <a-button class="search-btn1" @click="onSearch">查询</a-button>
        <a-button class="search-btn2" @click="resetCustom">
          <template #icon>
            <RedoOutlined/>
          </template>
          重置
        </a-button>
      </div>
    </div>
    <a-divider :style="{margin: 0}"/>
    <div class="annual-table-box">
      <div class="annual-table-header">
        <div>
<!--          <a-button type="text" @click="addColumn">-->
<!--            <template #icon>-->
<!--              <FilterOutlined />-->
<!--            </template>-->
<!--            自定义列</a-button>-->
        </div>
        <div>
          <a-button class="search-btn1" @click="goAdd">
            <template #icon>
              <PlusOutlined />
            </template>
            新增</a-button>
        </div>
      </div>
      <a-table :columns="columns" :data-source="data"
               :pagination="pagination"
               @change="handleTableChange"
               :row-key="(record) => record.id"
               :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)">
        <template #bodyCell="{ column, text }">
          <template v-if="column.key === 'tags'">
            <div class="table-btn-box">
              <span class="table-btn btn-1" @click="goInfo(text)">查看</span>
              <!--              <span class="table-btn btn-2">编辑</span>-->
              <a-popconfirm
                  title="确认删除吗?"
                  ok-text="确认"
                  cancel-text="取消"
                  @confirm="deleteData(text.id)"
              >
                <span class="table-btn btn-3">删除</span>
              </a-popconfirm>
            </div>
          </template>
<!--          <template v-if="column.key === 'contractName'">-->
<!--            <span :style="{color: '#0062AD', cursor: 'pointer'}">{{text}}</span>-->
<!--          </template>-->
          <template v-if="column.key === 'typeOfContract'">
            <span v-for="item in contractType" :key="item.value">
               <span v-if="item.value === text">{{item.label}}</span>
            </span>
          </template>
        </template>
      </a-table>
    </div>
    <CustomColumnModel ref="columnFrom"/>
    <AddContractCase ref="addCaseForm" @saveMemForm="onSaveCase"/>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted} from 'vue'
const { proxy  } = getCurrentInstance()
import {PlusOutlined, RedoOutlined} from '@ant-design/icons-vue';
import CustomColumnModel from './CustomColumnModel.vue'
import AddContractCase from './AddContractCase.vue'
import { useRouter } from "vue-router";
import {message} from "ant-design-vue";
const router = useRouter()
const contractType = ref([
  {
    label: '资源合同-MA',
    value: 1
  },
  {
    label: '船运合同',
    value: 2
  },
  {
    label: '船舶代理合同',
    value: 3
  },
  {
    label: '第三方计量合同',
    value: 4
  },
  {
    label: '保险合同-货险',
    value: 5
  },
  {
    label: '加油合同',
    value: 6
  },
  {
    label: '律师合同',
    value: 7
  },
  {
    label: '资源合同-CN',
    value: 8
  },
  {
    label: '保险合同-租船人责任险',
    value: 9
  },
])
const columns = ref([
  {
    title: '序号',
    dataIndex: 'orderNumber',
    key: 'orderNumber',
    width: '55px',
    align: 'left'
  },
    {
  title: '合同编号',
  dataIndex: 'contractNumber',
  key: 'contractNumber',
  align: 'left'
}, {
  title: '合同名称',
  dataIndex: 'contractName',
  key: 'contractName',
  ellipsis: true,
  align: 'left'
}, {
  title: '合同类型',
  dataIndex: 'typeOfContract',
  key: 'typeOfContract',
  ellipsis: true,
  align: 'left',
}, {
  title: '优秀之处',
  dataIndex: 'excellent',
  key: 'excellent',
  ellipsis: true,
  align: 'left',
}, {
  title: '申请人',
  dataIndex: 'applicant',
  key: 'applicant',
  ellipsis: true,
  align: 'left',
},
  {
    title: '审批人',
    dataIndex: 'approvedBy',
    key: 'approvedBy',
    ellipsis: true,
    align: 'left',
  },
  {
    title: '归档时间',
    dataIndex: 'archiveTime',
    key: 'archiveTime',
    ellipsis: true,
    align: 'left',
  },
  {
    title: '操作',
    key: 'tags',
    align: 'left',
    width: '130px'
  }
])
const data = ref([])
// const handleChange = () => {}
// const columnFrom = ref()
// const addColumn = () => {
//   columnFrom.value.showModal()
// }
const addCaseForm = ref()
const goAdd = () => {
  addCaseForm.value.showModal()
}
const pagination = ref({
  pageSize: 10,
  current: 1,
  total: 0,
  showQuickJumper: true,
  showSizeChanger: true,
  showTotal: total => `共 ${total} 条`,
  size: 'small'
})
const searchObj = ref({
  contractName: '',
  typeOfContract: undefined,
  applicant: '',
  archiveTime: null
})
const resetCustom = () => {
  Object.assign(searchObj.value, {
    contractName: '',
    typeOfContract: undefined,
    applicant: '',
    archiveTime: null
  })
}
const handleTableChange = (paginationpage) => {
   pagination.value.pageSize = paginationpage.pageSize
  pagination.value.current = paginationpage.current
  pagination.value.total = paginationpage.total
  getList()
}
const onSearch = () => {
  getList()
}
const onSaveCase = (val) => {
  if (val) {
    getList()
  }
}
/**
 * 删除模板
 * */
const deleteData = (id) => {
  proxy.$api.deleteCase(id).then(res => {
    if (res.resultCode === 0) {
      console.log('删除成功了', res)
      message.success('删除成功！')
      getList()
    }
  })
}
/**
 * 获取表格数据
 * */
const getList = () => {
  let newObj = {
    pageNum: pagination.value.current,
    pageSize: pagination.value.pageSize
  }
  let Obj = Object.assign(newObj,searchObj.value)
  proxy.$api.postCasePage(Obj).then(res => {
    data.value = res.resultObject.list
    data.value.map((item, index) => {
      Object.assign(item, {
        id: item.id.toString()
      })
    })
    console.log('优秀案例的表格', data.value)
    pagination.value.total = res.resultObject.total
  })
}
const goInfo = (item) =>{
  switch (item.typeOfContract) {
     case 1:
       router.push({
         path: '/AContractInfo',
         query: {
           tab: '2',
           id: item.conId
         },
       })
       break
    case 2:
      router.push({
        path: '/shipAContractInfo',
        query: {
          tab: '1',
          id: item.conId
        },
      })
      break
    case 3:
      router.push({
        path: '/ShipAgencyContractInfo',
        query: {
          tab: '2',
          id: item.conId
        },
      })
      break
    case 4:
      router.push({
        path: '/thirdMContractInfo',
        query: {
          tab: '1',
          id: item.conId
        },
      })
      break
    case 5:
      router.push({
        path: '/InsuranceContractInfo',
        query: {
          tab: '2',
          id: item.conId
        },
      })
      break
    case 6:
      router.push({
        path: '/RefuelingContractInfo',
        query: {
          tab: '1',
          id: item.conId
        },
      })
      break
    case 7:
      router.push({
        path: '/LawyersContractInfo',
        query: {
          tab: '1',
          id: item.conId
        },
      })
      break
    case 8:
      router.push({
        path: '/AContractInfo',
        query: {
          tab: '1',
          id: item.conId
        },
      })
      break
    case 9:
      router.push({
        path: '/InsuranceContractInfo',
        query: {
          tab: '1',
          id: item.conId
        },
      })
      break
  }
}
onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.annual-plan-box {
  background: #ffffff;
}
.annual-table-box {
  padding: 12px 16px;
}
.table-search {
  width: 100%;
  //height: 88px;
  display: flex;
  padding: 16px;
  flex-wrap: wrap;
  .search-item {
    border: 1px solid #DCDEE0;
    margin: 10px 0 14px 8px;
    height: 32px;
    display: flex;
    width: 330px;
    font-size: 14px;
    .search-input {
      width: 247px;
      text-align: left;
    }
    span {
      display: block;
      line-height: 32px;
      color: #2C3749;
      padding: 0 12px;
      text-align: left;
    }
  }
  .search-btn {
    margin-left: 10px;
    margin-bottom: 12px;
    display: flex;
    margin-top: 10px;
    .search-reset {
      margin-left: 20px;
    }
  }
}
.annual-table-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  margin-top: 10px;
}
.table-btn-box {
  display: flex;
  text-align: center;
  .btn-1 {
    color: #0062AD;
    padding-left: 10px;
  }
  .btn-2 {
    color: #6B7A8B;
    border-right: 1px solid #DCDEE0;
    border-left: 1px solid #DCDEE0;
    padding-left: 10px;
  }
  .btn-3 {
    color: #F5001D;
    padding-left: 10px;
  }
}
.table-btn {
  display: flex;
}
</style>
